<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Ztree</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
    <link href="./../../../static/plugins/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet" />
</head>

<body class="bg-white">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-sm-12">
                    <p>
                        <button class="btn btn-default" onclick="$.tree.expand()">展开</button>
                        <button class="btn btn-default" onclick="$.tree.collapse()">折叠</button>
                        <button class="btn btn-default" onclick="$._tree.checkAllNodes(true)">全选</button>
                        <button class="btn btn-default" onclick="$._tree.checkAllNodes(false)">取消全选</button>

                        <button class="btn btn-default"
                            onclick=" $._tree.setting.check.chkboxType = { 'Y': 'ps', 'N': 'ps' };$.modal.msg('当前是父子联动状态')">父子联动</button>
                        <button class="btn btn-default"
                            onclick=" $._tree.setting.check.chkboxType = { 'Y': '', 'N': '' };$.modal.msg('当前已取消父子联动状态')">取消联动</button>
                            <button class="btn btn-default" onclick="$.modal.msg($.tree.getCheckedNodes())">获取选中数据</button>
                    </p>
                    <p>
                        <button class="btn" id="btn btn-default" onclick="$.tree.searchNode()"> 搜索 </button>
                        <input type="text" class="empty" id="keyword" maxlength="50">
                    </p>
                    
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div id="ztree1" class="ztree"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script src="./../../../static/plugins/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>

    <script type="text/javascript">
        var operateObj;
        $(function () {
            $.tree.init(
                {
                    id: 'ztree1',
                    url: './../../../static/data/tree.json',
                    expandLevel: -1,
                    check: {
                        enable: true
                    },
                }
            );
        });
    </script>

</body>

</html>